<#import "/macro.ftl" as m>
<@m.page_header title='渠道' />
<div id="page-content-wrapper">
    <div id="page-title">
        <h3>渠道</h3>
        <div id="breadcrumb-right">
            <div class="float-right">
                <a href="javascript:;" class="btn medium primary-bg" onclick="showAddChannel();">
                    <span class="button-content">添加渠道</span>
                </a>
            </div>
        </div>
    </div>
    <div id="page-content">
    	<form id="form" action="/channels" method="get">
    		<div class="form-row">
    			<div class="form-input col-md-6">
    				<input placeholder="输入渠道名称或渠道号查询" type="text" name="keyword" id="keyword" value="${keyword}">
    			</div>
    			<div class="form-input col-md-2">
		        	<a href="javascript:;" class="btn large primary-bg radius-all-4" id="search" title="Validate!" onclick="$('#form').trigger('submit');">
			            <span class="button-content">查询</span>
	                </a>
		        </div>
    		</div>
    	</form>
    	<table id="channels" class="table">
	        <thead>
	            <tr>
	                <th>名称</th>
	                <th>渠道号</th>
	                <th>操作</th>
	            </tr>
	        </thead>
	        <tbody>
	        	<tr id="channel-row-template" class="hide">
	                <td id="name"></td>
	                <td id="number"></td>
	                <td>
	                    <a id="edit" href="javascript:;" class="btn medium primary-bg">
	                    	<span class="button-content">编辑</span>
	                    </a>
	                    <a id="delete" href="javascript:;" class="btn medium primary-bg"">
	                    	<span class="button-content">删除</span>
	                    </a>
	                </td>
	            </tr>
	        	<#list channels.list as channel>
					<tr id="${channel.id}">
		                <td id="name">${channel.name}</td>
		                <td id="number">${channel.number}</td>
		                <td>
		                    <a href="javascript:;" class="btn medium primary-bg" onclick="showEditChannel(${channel.id});">
		                    	<span class="button-content">编辑</span>
		                    </a>
		                    <a href="javascript:;" class="btn medium primary-bg" onclick="showDeleteChannel(${channel.id});">
		                    	<span class="button-content">删除</span>
		                    </a>
		                </td>
		            </tr>
				</#list>    
	    	</tbody>
	    </table>
	    <div class="button-group center-div">
	    	${pagerHelper.content}
	    </div>
    </div>
</div>
<div id="add-channel-template" class="hide">
	<form>
		<div class="form-row">
			<div class="form-label col-md-2">
                <label for="name">名称:</label>
            </div>
            <div class="form-input col-md-10">
                <input name="name" data-required="true" data-rangelength="[1,45]" type="text">
            </div>
		</div>
		<div class="form-row">
			<div class="form-label col-md-2">
                <label for="number">渠道号:</label>
            </div>
            <div class="form-input col-md-10">
                <input name="number" data-required="true" data-rangelength="[1,45]" type="text">
            </div>
		</div>
	</form>
</div>
<script>

function showAddChannel(){
	var html = '<div id="dialog" class="hide" title="添加渠道"><div class="mrg10A">' + $("#add-channel-template").html() + '</div></div>';
	$( html ).dialog({
        resizable:!0,
        minWidth:500,
        minHeight:250,
        modal:!0,
        dialogClass:"modal-dialog",
        closeOnEscape:!0,
        close : function() {
			$( this ).dialog( "destroy" );
		},
        buttons: {
            保存: function() {
            	var valid = $('#dialog form').parsley( 'validate' );
            	if(!valid){
            		return;
            	}
            	
            	$.post( '/channels', $( '#dialog form' ).serialize() )
                 .done(function(data){
                 	if(data["status"] == "success"){
                 		$.jGrowl("添加渠道成功", {sticky:!1,position:"top-right",theme:"bg-green"});
                 		
                 		var row = $('#channel-row-template').clone();
                 		row.removeAttr("class");
                 		row.attr('id', data.data.id);
                 		row.find('td[id=name]').html(data.data.name);
                 		row.find('td[id=number]').html(data.data.number);
                 		row.find('a[id=edit]').attr('onclick', 'showEditChannel(' + data.data.id + ');');
                 		row.find('a[id=delete]').attr('onclick', 'showDeleteChannel(' + data.data.id + ');');
                 		
                 		$("#channels tbody tr:eq(0)").after(row);
                 		
                 	}else{
                 		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
                 	}
                 	$( "#dialog" ).dialog( "close" );
                 })
                 .fail(function(){
                 	$.jGrowl("添加渠道失败", {sticky:!1,position:"top-right",theme:"bg-red"});
                 	$( "#dialog" ).dialog( "close" );
                 });
            }
		}
	});
};

function showEditChannel( id ){
	$.get( "/channels/" + id + "/edit", function( data ){
		var html = '<div id="dialog" class="hide" title="编辑渠道"><div class="mrg10A">' + data + '</div></div>';
		$( html ).dialog({
	        resizable:!0,
	        minWidth:500,
	        minHeight:250,
	        modal:!0,
	        dialogClass:"modal-dialog",
	        closeOnEscape:!0,
	        close : function() {
				$( this ).dialog( "destroy" );
			},
	        buttons: {
	            保存: function() {
	            	var valid = $('#dialog form').parsley( 'validate' );
	            	if(!valid){
	            		return;
	            	}
	            	
					$.ajax({
					    url: '/channels/' + id,
					    type: 'POST',
					    data: $('#dialog form').serialize()
					}).done(function(data) {
					    if (data["status"] == "success") {
					        $.jGrowl("更新渠道成功", {
					            sticky: !1,
					            position: "top-right",
					            theme: "bg-green"
					        });
					
					        var row = $('#channels tbody tr[id=' + data.data.id + ']');
					        row.find('td[id=name]').html(data.data.name);
					        row.find('td[id=number]').html(data.data.number);
					
					        $("#dialog").dialog("close");
					    } else {
					        $.jGrowl(data["message"], {
					            sticky: !1,
					            position: "top-right",
					            theme: "bg-red"
					        });
					    }
					}).fail(function() {
					    $.jGrowl("更新渠道失败", {
					        sticky: !1,
					        position: "top-right",
					        theme: "bg-red"
					    });
					});
	            }
			}
		});
	});
};

function showDeleteChannel( id ){
	$.messager.confirm( "提示", "确定删除渠道吗？", function(){
		$.ajax({
		    url: '/channels/' + id,
		    type: 'POST',
		    data: { _method: 'DELETE' }
		})
	    .done(function(data){
	     	if(data["status"] == "success"){
	     		$.jGrowl("删除渠道成功", {sticky:!1,position:"top-right",theme:"bg-green"});
	     		$('.table').find('tr[id=' + id + ']').remove();
	     	}else{
	     		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
	     	}
	     })
	     .fail(function(){
	     	$.jGrowl("删除渠道失败", {sticky:!1,position:"top-right",theme:"bg-red"});
	     });
	});
};

</script>